
import { View } from '@tarojs/components'
import { useState } from 'react'
import { Card, DatePicker, Form, ImagePicker, PrimaryButton, TextArea, TextInput, TimePicker } from '@/ui-components'
import CheckboxInput from '@/ui-components/checkbox-input'
import {
  TreasuryPrizeAwardModeOptions,
  TreasuryPrizeOwnerTypeOptions,
  TreasuryPrizeOpenMode,
  TreasuryPrizeOpenModeOptions,
  TreasuryPrizeWinMode,
  TreasuryPrizeWinModeOptions
} from '@/types'
import { dateUtils, dialog } from '@/utils'
import to from 'await-to-js'
import Taro from '@tarojs/taro'
import { useAppSelector } from '@/store/hooks'
import { TreasuryPrizeCreateParams, createTreasuryPrize } from '../../network'

interface TreasuryPrizeCreateState extends Partial<TreasuryPrizeCreateParams> {
  openDate?: string
  openDateTime?: string
}

interface TreasuryPrizeIputProps {
  treasuryPrize: TreasuryPrizeCreateState
  onChange: (treasuryPrize: TreasuryPrizeCreateState) => void
}

const PrizeOpenModeIput = ({ treasuryPrize, onChange}: TreasuryPrizeIputProps) => {
  if (treasuryPrize.openMode === TreasuryPrizeOpenMode.person) {
    return <TextInput
      type='number'
      label='开奖人数'
      placeholder='请输入开奖人数'
      value={String(treasuryPrize.personNum || '')}
      onChange={personNum => onChange({ ...treasuryPrize, personNum: Number(personNum) })}
    />
  }
  if (treasuryPrize.openMode === TreasuryPrizeOpenMode.time) {
    return <>
      <DatePicker
        label='开奖日期'
        placeholder='请选择开奖日期'
        value={treasuryPrize.openDate}
        onChange={openDate => onChange({ ...treasuryPrize, openDate })}
      />
      <TimePicker
        label='开奖时间'
        placeholder='请选择开奖时间'
        value={treasuryPrize.openDateTime}
        onChange={openDateTime => onChange({ ...treasuryPrize, openDateTime })}
      />
    </>
  }
  return null
}

const PrizeWinModeIput = ({ treasuryPrize, onChange}: TreasuryPrizeIputProps) => {
  if (treasuryPrize.winMode === TreasuryPrizeWinMode.person) {
    return <TextInput
      type='number'
      label='中奖人数'
      placeholder='请输入中奖人数'
      value={String(treasuryPrize.winNum || '')}
      onChange={winNum => onChange({ ...treasuryPrize, winNum: Number(winNum) })}
    />
  }
  if (treasuryPrize.winMode === TreasuryPrizeWinMode.rate) {
    return <TextInput
      type='number'
      label='中奖概率'
      placeholder='请输入中奖概率百分比'
      value={String(treasuryPrize.winRate || '')}
      onChange={winRate => onChange({ ...treasuryPrize, winRate: Number(winRate) })}
    />
  }
  return null
}

const canNext = (treasuryPrize: TreasuryPrizeCreateState) => {
  if (!treasuryPrize.name || !treasuryPrize.image || !treasuryPrize.description) {
    return false
  }
  if (!treasuryPrize.worth || !treasuryPrize.cost || treasuryPrize.isLimit === undefined) {
    return false
  }
  if (!treasuryPrize.ownerType || !treasuryPrize.openMode || !treasuryPrize.winMode || !treasuryPrize.awardMode) {
    return false
  }
  if (treasuryPrize.openMode === TreasuryPrizeOpenMode.person && !treasuryPrize.personNum) {
    return false
  }
  if (treasuryPrize.openMode === TreasuryPrizeOpenMode.time && (!treasuryPrize.openDate || !treasuryPrize.openDateTime)) {
    return false
  }
  if (treasuryPrize.winMode === TreasuryPrizeWinMode.person && !treasuryPrize.winNum) {
    return false
  }
  if (treasuryPrize.winMode === TreasuryPrizeWinMode.rate && !treasuryPrize.winRate) {
    return false
  }
  return true
}

const onPressNext = async (treasuryPrize: TreasuryPrizeCreateState, treasuryId: number) => {
  if (treasuryPrize.openDate && treasuryPrize.openDateTime) {
    treasuryPrize.openTime = dateUtils.fomartDateWitDateTime(treasuryPrize.openDate, treasuryPrize.openDateTime)
  }
  if (!treasuryId) {
    Dialog.toast('宝库不存在，请稍后重试')
    return
  }
  treasuryPrize.treasuryId = treasuryId
  const [err] = await to(createTreasuryPrize(treasuryPrize as TreasuryPrizeCreateParams))
  if (err) {
    Dialog.toast(err.message || '发布抽奖失败，请稍后重试')
  }
  Dialog.toast('发布抽奖成功')
  Taro.navigateBack()
}

export default function TreasuryPrizeCreate() {

  const [treasuryPrize, setTreasuryPrize] = useState<TreasuryPrizeCreateState>({})
  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)

  return (
    <View className='treasury-prize-create safe-bottom'>
      <Card>
        <Form>
          <TextInput
            label='奖品名称'
            placeholder='请输入奖品名称'
            value={treasuryPrize.name}
            onChange={name => setTreasuryPrize({ ...treasuryPrize, name })}
          />
          <ImagePicker
            images={treasuryPrize.image ? [treasuryPrize.image] : []}
            onChange={(images) => setTreasuryPrize({ ...treasuryPrize, image: images[0] })}
            title='奖品图标'
            count={1}
          />
          <TextArea
            label='奖品描述'
            placeholder='请输入奖品描述'
            maxlength={50}
            value={treasuryPrize.description}
            onChange={description => setTreasuryPrize({ ...treasuryPrize, description })}
          />
          <TextInput
            type='number'
            label='奖品价值'
            placeholder='请输入奖品价值积分'
            value={String(treasuryPrize.worth || '')}
            onChange={worth => setTreasuryPrize({ ...treasuryPrize, worth: Number(worth) })}
          />
          <TextInput
            type='number'
            label='抽奖积分'
            placeholder='请输入抽奖消耗积分'
            value={String(treasuryPrize.cost || '')}
            onChange={cost => setTreasuryPrize({ ...treasuryPrize, cost: Number(cost) })}
          />
          <CheckboxInput
            label='发起人'
            value={treasuryPrize.ownerType}
            options={TreasuryPrizeOwnerTypeOptions}
            onChange={ownerType => setTreasuryPrize({ ...treasuryPrize, ownerType })}
          />
          <CheckboxInput
            label='任务完成'
            value={treasuryPrize.isLimit}
            options={[
              { name: '限定', value: true },
              { name: '非限定', value: false }
            ]}
            onChange={isLimit => setTreasuryPrize({ ...treasuryPrize, isLimit })}
          />
        </Form>
      </Card>
      <Card>
        <Form>
          <CheckboxInput
            label='开奖方式'
            value={treasuryPrize.openMode}
            options={TreasuryPrizeOpenModeOptions}
            onChange={openMode => setTreasuryPrize({ ...treasuryPrize, openMode })}
          />
          <PrizeOpenModeIput treasuryPrize={treasuryPrize} onChange={setTreasuryPrize} />
          <CheckboxInput
            label='中奖方式'
            value={treasuryPrize.winMode}
            options={TreasuryPrizeWinModeOptions}
            onChange={winMode => setTreasuryPrize({ ...treasuryPrize, winMode })}
          />
          <PrizeWinModeIput treasuryPrize={treasuryPrize} onChange={setTreasuryPrize} />
          <CheckboxInput
            label='发奖方式'
            value={treasuryPrize.awardMode}
            options={TreasuryPrizeAwardModeOptions}
            onChange={awardMode => setTreasuryPrize({ ...treasuryPrize, awardMode })}
          />
        </Form>
      </Card>
      <PrimaryButton
        disabled={!canNext(treasuryPrize)}
        text='发布抽奖'
        onClick={() => onPressNext(treasuryPrize, treasuryId)}
      />
    </View>
  )
}
